import { useState } from 'react'
// pnpm add sass
import './App.scss'
import avatar from './assets/bozai.png'
import _ from 'lodash-es'
// import { orderBy } from 'lodash-es'

/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 */

// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
  },
]
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

const arr = [3,4,32,1,55,32,1]
// 普通数组排序
console.log(arr.sort((a,b) => a-b));
console.log(arr.sort((a,b) => b-a));
// 对象数组排序
const arr2 = [
  { id: 10, name: 'test'},
  { id: 3, name: 'best'},
  { id: 43, name: 'Aest'},
  { id: 2, name: 'Test'},
  { id: 5, name: 'Eest'},
]
// 需求： 将arr2对象数组，按照id的值 升序排列
//        将arr2对象数组，按照name的值，降序排列
// 可以网上搜索一些手写的算法题。 工作里面一般使用lodash----- orderby ---- asc 升序   desc降序
// _.orderby(arr2, ['id'], ['asc'])  这个函数就会返回一个排过序的新数组
// 下载lodash-es --- 使用脚手架开发的vue react单页面的项目，一定要保证打包的体积小
// lodash 只用了一个函数，他也会把所有的函数打包进去
// lodash-es 只用了一个函数，打包就只有一个函数 ----  方便tree-shaking  (摇树)
// 字符串的大小比较是换算为 ASCII值， 平时记几个核心的值即可
// 数字0---48 ---- 9--- 0+10-1 = 9
// 字母a---97 ---- z--- 97+26-1 = 122
// 字母A---65 ---- Z--- 65+26-1 = 90
console.log('3' > '12');
console.log(3 > 12);
console.log('a' > 'A');
console.log(_.orderBy(arr2, ['name'], ['asc']));

const App = () => {
  // defaultList 是普通变量   list才是状态变量，只有状态变量的修改才会更新页面
  const [list, setList] = useState(defaultList)
  // activeType表示当前激活的 tab是哪一个，默认是hot
  const [activeType, setActiveType] = useState('hot')

  // 现在点击的tab要让list数组排序，所以需要加帮下面的在行内写的函数，放到上面来
  const updateTab = (type) => {
    setActiveType(type)
    // 在这个下面在继续写list数组排序功能
    let tmp = []
    if(type === 'hot') {
      tmp = _.orderBy(list, ['like'], ['desc'])
    } else if (type === 'time') {
      tmp = _.orderBy(list, ['ctime'], ['desc'])
    }
    console.log(tmp);
    setList(tmp)
  }

  return (
    <div className="app">
      {/* 导航 Tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名： active */}
            {/* <span className='nav-item'>最新</span>
            <span className='nav-item active'>最热</span> */}
            { tabs.map(item => (
                <span 
                  key={item.type} 
                  onClick={() => updateTab(item.type)} 
                  className={activeType === item.type ? 'nav-item active' : 'nav-item'}>
                    {item.text}
                </span>
              ))
            }
          </li>
        </ul>
      </div>

      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
            {/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text">发布</div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          { list.map(item => (
            <div className="reply-item" key={item.rpid}>
              {/* 头像 */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt=""
                    src={item.user?.avatar}
                  />
                </div>
              </div>

              <div className="content-wrap">
                {/* 用户名 */}
                <div className="user-info">
                  <div className="user-name">{item.user?.uname}</div>
                </div>
                {/* 评论内容 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  <div className="reply-info">
                    {/* 评论时间 */}
                    <span className="reply-time">{item.ctime}</span>
                    {/* 评论数量 */}
                    <span className="reply-time">点赞数:{item.like}</span>
                    <span className="delete-btn">
                      删除
                    </span>

                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default App